<template>
  <div class="page luckdraw-address-list">
    <div class="card-section">
      <address-list v-for="(item, i) in winnerList" :key="i" :listData="item"></address-list>
    </div>
    <empty-tip v-if="showEmptyTip"></empty-tip>
    <a class="load-more" v-if="showNoMore">没有更多了</a>
    <a class="load-more" v-if="showLoadMore">加载中...</a>
  </div>
</template>

<script>
import MLink from 'comp/m-link'
import MButton from 'comp/m-button'
import AddressList from 'comp/address-list'
import EmptyTip from 'comp/empty-tip'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MLink,
    MButton,
    AddressList,
    EmptyTip
  },
  data () {
    return {
      activityId: '',
      page: 1,
      showEmptyTip: false,
      showNoMore: false,
      showLoadMore: false,
      winnerList: []
    }
  },
  onReachBottom () {
    // 页面上拉触底事件的处理函数
    if (this.showLoadMore) {
      this.getPageData()
    }
  },
  async mounted () {
    this.resetData()
    this.activityId = this.$root.$mp.query.activityId
    this.getPageData()
  },
  methods: {
    /**
     * 获取中奖的名单
     */
    async getPageData () {
      let page = this.page
      const ret = await this.$store.dispatch('getActivityPlayer', {
        activityid: this.activityId,
        page,
        rows: 20,
        iswinner: 1
      })
      const arr1 = this.winnerList
      const arr2 = ret.list
      if (arr1.length === 0 && arr2.length === 0) {
        // 暂无记录
        this.showEmptyTip = true
      } else {
        if (ret.list.length < 20) {
          // 没有更多了
          this.showNoMore = true
          this.showLoadMore = false
        } else {
          // 加载中...
          this.showLoadMore = true
        }
      }
      this.winnerList = arr1.concat(arr2)
      this.page = ++page
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-address-list {
  .info {
    font-size: 28rpx;
    color: #333;
    background-color: #fff;
    padding: 30rpx;
    .red {
      color: #e0382f;
    }
  }
  .load-more {
    font-size: 28rpx;
    color: #448ff0;
    text-align: center;
    padding: 30rpx 0 70rpx;
  }
}
</style>
